<template>
  <div class="appTemplate">
    <Header :title="'起步案例-画线图'" :back="true"/>
    <main ref="threeView" class="main"></main>
    <Footer />
  </div>
</template>

<script setup lang="ts">
import Header from '@/components/Header.vue';
import Footer from '@/components/Footer.vue';
import {onMounted, ref} from "vue";
// 导入整个 three.js核心库
import * as THREE from 'three';
// 导入判断WebGL工具
import WebGL from "@/utils/WebGL";
// 定义three场景显示区域
const threeView = ref();

// 创建场景
const scene = new THREE.Scene();
// 创建相机镜头
// 视野角度（fov）长宽比（aspect）近截面（near）远截面（far）
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 500);
// 创建渲染器
const renderer = new THREE.WebGLRenderer();

// 画线
const drawLine = () => {
  // 设置相机俯视位置
  camera.position.set( 0, 0, 100 );
  // 等同于 camera.position.z = 100;
  camera.lookAt( 0, 0, 0 );
  const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
  const points = [];
  points.push( new THREE.Vector3( - 10, -60, 0 ) );
  points.push( new THREE.Vector3( - 10, 0, 0 ) );
  points.push( new THREE.Vector3( 0, 50, 0 ) );
  points.push( new THREE.Vector3( 10, 0, 0 ) );
  points.push( new THREE.Vector3( 10, -60, 0 ) );
  points.push( new THREE.Vector3( -10, -60, 0 ) );
  const geometry = new THREE.BufferGeometry().setFromPoints( points );
  // 将多个点链接起来
  return new THREE.Line(geometry, material);
}
const line = drawLine();
// 将立方体添加到场景中
scene.add( line );

onMounted(() => {
  if (WebGL.isWebGLAvailable()) {
    renderer.setSize(threeView.value.offsetWidth - 15, threeView.value.offsetHeight - 15, true);
    threeView.value.appendChild(renderer.domElement);
    // 渲染
    renderer.render( scene, camera );
  } else {
    const warning = WebGL.getWebGLErrorMessage();
    threeView.value.appendChild(warning);
  }
})



</script>

<style scoped>

</style>